<template>
	<div class="head">
		<div class="bg" :style="styleObj"></div>
		<div class="back">
			<i @click="$router.go(-1)" class="iconfont icon-zuo"></i>
			<div>
				<i class="iconfont icon-shoucang"></i>
				<i class="iconfont icon-fenxiang"></i>
			</div>
		</div>
		<div class="movieInfo" v-if="detail">
			<div class="imgBox">
				<img :src="detail.image" alt="" />
				<div class="movieType">
					<p v-if="detail.is3D">3D</p>
					<p v-if="detail.isIMAX3D">IMAX 3D</p>
					<p v-if="detail.isDMAX">中国 巨幕</p>
				</div>
			</div>
			<div>
				<h2 class="titleCn">{{detail.titleCn}}</h2>
				<p class="titleEn">{{detail.titleEn}}</p>
				<div>
					<p class="runtime">
						<span v-if="detail.isEggHunt">有彩蛋 - </span>
						{{detail.runTime}}
					</p>
					<div class="type">
						<span v-for="item in detail.type" :key="item">{{item}}</span>
					</div>
					<p class="showDay">{{detail.release.date}}{{detail.release.location}}上映</p>
					<span class="score">{{detail.rating}}</span>
				</div>
				<div class="btnBox">
					<button>我想看</button>
					<button>我想评价</button>
				</div>
			</div>
		</div>
		<p class="commonSpecial">{{detail.commonSpecial}}</p>
		<div class="lookInfo">查影讯/购票</div>
	</div>
</template>

<script>
	export default {
		props: {
			detail: Object,
			styleObj: Object
		},
		data() {
			return {

			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/assets/css/common.scss';

	.head {
		position: relative;
		.bg {
			position: absolute;
			top: 0;
			width: 100%;
			width: 100%;
			height: vw(130);
			background-size: 100%;
			background-repeat: no-repeat;
			filter: blur(5px);
			z-index: -1;
		}

		.back {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: vw(16) vw(20);

			i {
				font-size: vw(20);
				color: #eee;
			}

			div {
				display: flex;
				align-items: center;

				i {
					margin-right: vw(6);
				}

				i:nth-child(1) {
					font-size: vw(38);
				}
			}
		}

		.movieInfo {
			display: flex;
			background: url("../../../assets/images/movieDetail.png") no-repeat;
			background-size: 100%;
			background-position-y: vw(46);

			.imgBox {
				position: relative;

				img {
					width: vw(120);
					height: vw(190);
				}

				.movieType {
					position: absolute;
					top: vw(10);
					right: vw(6);
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-top: 0;

					p {
						display: flex;
						align-items: center;
						justify-content: center;
						width: vw(36);
						height: vw(30);
						border: 1px solid #fff;
						border-radius: vw(5);
						text-align: center;
						margin-bottom: vw(10);
						color: #fff;
						font-size: vw(10);
						font-weight: normal;
						background: rgba(0, 0, 0, .3);
					}
				}
			}

			>div {
				margin-left: vw(10);

				.titleCn {
					font-size: vw(20);
					color: #fff;
				}

				.titleEn {
					font-size: vw(14);
					color: #fff;
				}

				div {
					margin-top: vw(20);
					font-size: vw(14);
					font-weight: bold;
					position: relative;

					.type {
						margin-top: 0;
						display: flex;

						span {
							margin-right: vw(10);
						}
					}

					.score {
						position: absolute;
						top: vw(-25);
						right: vw(6);
						background: #659d0e;
						padding: vw(4);
						color: #fff;
					}
				}
			}

			.btnBox {
				display: flex;

				button {
					width: vw(100);
					height: vw(46);
					line-height: vw(46);
					text-align: center;
					border: 1px solid #999;
					border-radius: vw(20);
					margin-right: vw(10);
					font-size: vw(20);
					color: #999;
				}

				button:nth-child(2) {
					color: #4b651c;
					border: 1px solid #4b651c;
				}
			}
		}

		.commonSpecial {
			font-size: vw(20);
			color: orangered;
			padding: vw(10) 0;
			text-align: center;
		}

		.lookInfo {
			width: vw(300);
			height: vw(50);
			line-height: vw(50);
			text-align: center;
			font-size: vw(20);
			color: #fff;
			background: #ff8600;
			margin: 0 auto vw(20);
			border-radius: vw(20);
		}
	}
</style>
